<template>
	<div>
		<el-form-item
			label="题干"
			prop="questionTitle"
			:rules="{
				required: true,
				message: '请输入题干',
				trigger: ['blur', 'change']
			}"
		>
			<template>
				<el-input v-model.trim="questionForm.questionTitle" maxlength="2000">
					<i slot="suffix" @click="handleEdit(questionForm.questionTitle,'questionTitle')" class="el-icon-edit-outline icons" />
				</el-input>
			</template>
		</el-form-item>
		<el-form-item
			label="听力音频"
			prop="listeningAudioUrl"
			:rules="{
				required: true,
				message: '请输入音频地址',
				trigger: ['blur', 'change']
			}"
		>
			<div class="flex ai-center">
				<el-input v-model.trim="questionForm.listeningAudioUrl" />
				<div class="btns">
					<upload-audio
						@on-success="vidUploadSuccess"
						@on-progress="vidProgress"
						class="upload-video"
						ref="uploadAudioRef"
						:size="100*1024*1024"
						:disabled="disabledUploadAudio"
					>
						<img
							class="title-icon"
							src="@rc/assets/images/icon-add.png"
							alt=""
						>
						<el-button type="text" @click="onClickUploadAudio">上传音频</el-button>
					</upload-audio>
				</div>
			</div>
			<!-- 进度条 -->
			<div class="process" v-if="tempFile.percent">
				<div class="el-upload-list__item-name">
					<i class="el-icon-document" />
					<span>{{ tempFile.name }}</span>
					<span>{{ tempFile.percent?tempFile.percent+'%':'' }}</span>
				</div>
				<el-progress :show-text="false" :percentage="tempFile.percent" />
			</div>
		</el-form-item>
		<el-form-item
			label="音频标识"
			prop="audioId"
			:rules="{
				required: true,
				message: '请输入音频标识',
				trigger: ['blur', 'change']
			}"
		>
			<el-input v-model.trim="questionForm.audioId" />
			<div class="tip">Tips：输入音频标识后挑题组卷/智能组卷时可以快速查找属于同套试卷的听力题</div>
		</el-form-item>
		<base-edit-table
			:list="smallQuestionList"
			parent-type="L"
			:basic-info="basicInfo"
			:tag-info="tagInfo"
			@sub-change="subChange"
			@del-sub="deleteSub"
		/>
	</div>
</template>
<script >
import UploadAudio from "@rc/pages/questions/components/edit-frame/components/uploadAudio.vue";
import BaseEditTable from "@rc/pages/components/question-base/base-edit-table.vue";
export default {
    name:'q-judge-edit',
    components:{
        UploadAudio,
        BaseEditTable
    },
    props:{
        value: {
            type:Object,
            default:()=>{}
        },
        basicInfo: {
            type: Object,
            default: () => {}
        },
        tagInfo: {
            type: Object,
            default: () => {}
        }
    },
    data(){
        return{
            questionForm:{},
            isShowProcess:false,//是否显示进度条
            tempFile:{},
            smallQuestionList:[]
        };
    },
    computed:{
        //是否可以上传音频
        disabledUploadAudio(){
            return this.tempFile.percent;
        }
    },
      watch:{
        value:{
            immediate:true,
            deep:true,
            handler(val){
                this.questionForm =  JSON.parse(JSON.stringify(val));
                if(!val.smallQuestionList) {
                    this.$set(this.questionForm,'smallQuestionList',[]);
                    this.smallQuestionList = [];
                } else {
                    this.smallQuestionList = val.smallQuestionList;
                }
                if(!val.smallResourceIds){
                    this.$set(this.questionForm,'smallResourceIds',[]);
                }
            }
        },
        questionForm:{
            immediate:true,
            deep: true,
            handler(val){
                this.$emit('change',val);
            }
        }
    },
    methods:{
        // 编辑
        handleEdit(value,key){
            this.$emit('edit',value,key);
        },
        //音频
        onClickUploadAudio(){
            if(this.tempFile.percent){
                this.$message.warning("音频上传中,请等待");
                return;
            }
        },
        vidUploadSuccess(file) {
            this.tempFile = {};
			this.isShowProcess = false;
			this.$refs.uploadAudioRef.reset();
            this.$set(this.questionForm,'listeningAudioUrl',file.filePath);
		},
        subChange(list){
            this.questionForm.smallQuestionList = list;
        },
        //存储被删除的子题id
        deleteSub(deleteResourceIds){
            this.$set(this.questionForm,'smallResourceIds',deleteResourceIds);
        },
        vidProgress({ file }) {
            this.isShowProcess = true;
            this.videoFlag = true;
            this.tempFile = {
                name: file.name,
                percent: file.percentage.toFixed(0)
            };
		},
        // 校验试题内容
        api_checkAnswer(){
            const {listeningAudioUrl} = this.questionForm;
            const audioFormatError = !(/.mp3$/.test(listeningAudioUrl));
            if(audioFormatError){
                this.$message.warning("请检查听力音频格式是否为mp3文件");
                return false;
            } else {
                return true;
            }
        }
    }
};

</script>
<style scoped lang="less">
.title-icon {
    width: 13px;
    height: 14px;
    margin-right: 8px;
}
.icons{
    cursor: pointer;
    font-size: 20px;
    margin-top: 7px;
}
.btns {
    margin-left: 10px;
    width: 120px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /deep/ .el-upload-list {
		display: none;
	}
}
.tip{
    font-size: 12px;
    color: #666;
}
.process {
		min-width: 100px;
		max-width: 50%;
		margin-bottom: 10px;
		/deep/ .el-progress-bar__outer {
			height: 2px !important;
		}
	}
</style>
